<template>
  <div class="wrap">
    <div class="container w">
      <el-row :gutter="25">
        <el-col :span="8">
          <el-input
            placeholder="请输入商品标题或订单号进行搜索"
            v-model="inputSearch"
            clearable
            size="medium"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col class="seniorSelect" :span="3">
          <div @click="seniorSelect = !seniorSelect">
            {{ seniorSelect ? "高级筛选条件" : "更多筛选条件" }}
            <i
              :class="[
                !seniorSelect ? 'el-icon-arrow-down' : 'el-icon-arrow-up',
              ]"
            ></i>
          </div>
        </el-col>
      </el-row>
      <el-row
        class="senior-select"
        :class="[!seniorSelect ? 'showSeniorSelect' : '']"
      >
        <el-col :span="9">
          成交时间
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="medium"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="5">
          交易状态
          <el-select
            v-model="value1"
            clearable
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          售后服务
          <el-select
            v-model="value2"
            clearable
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          评价状态
          <el-select
            v-model="value3"
            clearable
            placeholder="请选择"
            size="medium"
          >
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Screen",
  components: {},
  data() {
    return {
      seniorSelect: false,
      inputSearch: "",
      date: "",
      options4: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "需要我评价",
          label: "需要我评价",
        },
        {
          value: "我已评价",
          label: "我已评价",
        },
        {
          value: "对方已评",
          label: "对方已评",
        },
        {
          value: "双方已评",
          label: "双方已评",
        },
      ],
      options3: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "已投诉",
          label: "已投诉",
        },
        {
          value: "退款中",
          label: "退款中",
        },
      ],
      options2: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "付款确认中",
          label: "付款确认中",
        },
        {
          value: "买家已付款",
          label: "买家已付款",
        },
        {
          value: "卖家已发货",
          label: "卖家已发货",
        },
        {
          value: "交易成功",
          label: "交易成功",
        },
        {
          value: "交易关闭",
          label: "交易关闭",
        },
        {
          value: "退款中的订单",
          label: "退款中的订单",
        },
      ],
      value1: "",
      value2: "",
      value3: "",
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.container {
  margin: 15px;
}
.seniorSelect {
  line-height: 36px;
  cursor: pointer;
}
.showSeniorSelect {
  display: none;
}
.senior-select {
  margin-top: 15px;
  ::v-deep .el-input {
    width: 150px;
  }
}
</style>
